import React, { useEffect } from 'react';
import * as echarts from 'echarts/lib/echarts';

const LineEcharts = () => {
  const symbolSize = 20;
  const data = [
    [40, -10],
    [-30, -5],
    [-76.5, 20],
    [-63.5, 40],
    [-22.1, 50],
  ];
  const option = {
    title: {
      text: 'Try Dragging these Points',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      },
    },
    grid: {
      top: '8%',
      bottom: '12%',
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'slider',
        yAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        yAxisIndex: 0,
        filterMode: 'none',
      },
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
    ],
  };

  useEffect(() => {
    var myChart = echarts.init(document.getElementById('main'));
    // myChart.setOption(option);
    var myChart2 = echarts.init(document.getElementById('main2'));
    myChart2.setOption(option);
    // myChart.group = 'group1';
    // myChart2.group = 'group1';
    // echarts.connect('group1');

    setTimeout(function () {
      // Add shadow circles (which is not visible) to enable drag.
      myChart.setOption({
        graphic: data.map(function (item, dataIndex) {
          return {
            type: 'circle',
            position: myChart.convertToPixel('grid', item),
            shape: {
              cx: 0,
              cy: 0,
              r: symbolSize / 2,
            },
            invisible: true,
            draggable: true,
            ondrag: function (dx, dy) {
              onPointDragging(dataIndex, [this.x, this.y]);
            },
            onmousemove: function () {
              showTooltip(dataIndex);
            },
            onmouseout: function () {
              hideTooltip(dataIndex);
            },
            z: 100,
          };
        }),
      });
    }, 0);

    window.addEventListener('resize', updatePosition);
    myChart.on('dataZoom', updatePosition);
    function updatePosition() {
      myChart.setOption({
        graphic: data.map(function (item, dataIndex) {
          return {
            position: myChart.convertToPixel('grid', item),
          };
        }),
      });
    }
    function showTooltip(dataIndex) {
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: dataIndex,
      });
    }
    function hideTooltip(dataIndex) {
      myChart.dispatchAction({
        type: 'hideTip',
      });
    }
    function onPointDragging(dataIndex, pos) {
      data[dataIndex] = myChart.convertFromPixel('grid', pos);
      // Update data
      myChart.setOption({
        series: [
          {
            id: 'a',
            data: data,
          },
        ],
      });
    }
  }, []);

  return (
    <div style={{ width: '100%' }}>
      <div
        id="main"
        style={{
          width: '100%',
          height: 400,
        }}
      >
        {' '}
      </div>
      <div
        id="main2"
        style={{
          width: '100%',
          height: 400,
        }}
      >
        {' '}
      </div>
    </div>
  );
};
export default LineEcharts;
